<!doctype html>
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <meta name="referrer" content="no-referrer"/>
    <title>iStudy-为你推荐</title>
    <!-- Bootstrap CSS -->
    <link rel="stylesheet" type="text/css" href="front/Bootstrap/dist/css/bootstrap-reboot.css">
    <link rel="stylesheet" type="text/css" href="front/Bootstrap/dist/css/bootstrap.css">
    <link rel="stylesheet" type="text/css" href="front/Bootstrap/dist/css/bootstrap-grid.css">
    <style>
        body {
            background-color: rgb(238, 238, 238);
        }

        .navbar {
            margin-bottom: 0px;
            background-color: #FFFFFF;
            box-shadow: 0 0 1em #eee;
            line-height: 55px;
        }

        .banner {
            background-image: url('../iStudy/images/banner.jpg');
            color: white;
        }

        .container-fluid {
            background-color: rgb(51, 113, 214);
        }

        /*以下设置导航栏样式*/
        .newactive {
            background-color: rgb(51, 113, 214);
        }

        .navbar-inverse {
            border-color: white;
        }

        .navbar-inverse .navbar-nav > li > a{
            color: white;
        }

        /*以下设置阶段样式*/
        .stage-wrap {
            margin-bottom: 20px;
        }

        .stage-sort {
            padding: 0 8px;
            border-radius: 50%;
            background-color: #1E9FFF;
            color: white;
        }

        .stage-title {
            color: #1E9FFF;
            font-weight: 700;
            font-size: 25px;
        }

        /*一下设置课程容器样式*/
        .ui-block {
            padding: 10px;
            background-color: #fff;
            border-radius: 5px;
            border: 1px solid #e6ecf5;
            margin-bottom: 15px;
        }

        .post-thumb {
            margin-bottom: 15px;
        }

        .post-content h4 {
            font-weight: 600;
        }

        .post-thumb img:hover {
            transform: scale(1.1);
        }

        .new-post-additional-info {
            padding-top: 10px;
            padding-bottom: 10px;
            text-align: right;
        }

        /*自定义登录框样式*/
        .login-wrap {
            padding: 20px 30px;
        }

        .modal-header {
            color: #666;
            font-size: 24px;
            font-weight: 600;
            text-align: center;
        }

        .login-btn {
            display: block;
            width: 100%;
        }

        .login-tip {
            text-align: center;
            font-size: 14px;
            color: #1E9FFF;
            letter-spacing: 0;
            line-height: 14px;
        }

        .login-footer {
            color: #808080;
            text-align: center;
        }

        .courseType-title {
            font-size: 20px;
            color: #000;
        }
    </style>
</head>
<body>
<!-- 模态框（Modal） -->
<div class="modal fade" id="myModal"  style="z-index: 9999;" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="login-wrap">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                    <span class="modal-title" id="myModalLabel">账号登录</span>
                </div>
                <div class="modal-body">
                    <form role="form">
                        <div class="form-group">
                            <input type="text" class="form-control" id="name" placeholder="请输入账号登录" value="admin">
                        </div>
                        <div class="form-group">
                            <input type="password" class="form-control" id="password" placeholder="请输入任意字符的6-18位密码,注意密码不支持更改" value="123456">
                        </div>
                        <div class="form-group">
                            <button type="button" class="btn btn-primary login-btn" onclick="login()">登录</button>
                        </div>
                        <div class="form-group login-tip">
                            未注册账户登录后默认为你创建账号
                        </div>
                    </form>
                </div>
                <div class="modal-footer login-footer">
                    登录即代表你同意<a>用户协议</a>和<a>隐私政策</a>
                </div>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal -->
</div>
<div th:replace="common/bar::#header"></div>
<div class="jumbotron text-center banner" style="margin-bottom:0;margin-top: 55px">
    <h1>iStudy，找到你的登顶之路</h1>
    <p>我们的征途是星辰大海</p>
</div>
<nav class="navbar navbar-inverse" style="line-height: normal">
    <div class="container-fluid">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
        </div>
        <div class="collapse navbar-collapse" id="myNavbar">
            <ul class="nav navbar-nav">
                <li class="newactive" th:each="courseType:${courseTypes}">
                    <a class="courseType-title" th:href="@{index(courseTypeId=${courseType.id})}" th:text="${courseType.title}"></a>
                </li>
                <li class="newactive" th:if="${userInfo}!=null">
                    <a class="courseType-title" th:href="@{recommend(id=${userInfo.id})}">为你推荐</a>
                </li>
            </ul>
            <form action="search" method="get" onsubmit="return checkSearch()" class="navbar-form navbar-right"  role="search">
                <div class="form-group">
                    <input type="text" id="search" autocomplete="off" placeholder="输入关键词进行站内搜索"  class="form-control"/>
                </div>
                <button type="submit" class="btn btn-default">查找</button>
            </form>
        </div>
    </div>
</nav>
<div class="container" style="margin-top: 20px" th:if="${courseStages==null}">
    <div class="row">
        <div class="col-sm-12" style="border-left:1px solid rgb(232,232,232)">
            <div class="col col-xl-3 col-lg-6 col-md-6 col-sm-12 col-12" th:each="course:${hotCourses}">
                <!--课程列表 从这里设置移入可以点击-->
                <div class="ui-block">
                    <!-- Post -->
                    <article>
                        <div class="post-thumb">
                            <a th:href="@{courseDetail(id=${course.id})}">

                                <img th:if="${course.imgUrl!=null}" style="width: 100%;height: 144px"
                                     th:src="${course.imgUrl}" alt="photo">
                            </a>
                        </div>
                        <div class="post-content">
                            <h4>
                                <a th:href="@{courseDetail(id=${course.id})}">
                                    [(${course.title})]
                                </a>
                            </h4>

                            <p style="color:#999999" th:if="${course.introduce!=null}">
                            <div th:if="${#strings.length(course.introduce) gt 10}">
                                <a th:href="@{courseDetail(id=${course.id})}">
                                    摘要：[(${course.title})]...»
                                </a>

                            </div>
                            <div th:if="${#strings.length(course.introduce) le 10}">
                                <a th:href="@{courseDetail(id=${course.id})}">
                                    摘要：[(${course.introduce})]
                                </a>
                            </div>
                            </p>
                            <div class="new-post-additional-info">
                                <button type="button" class="btn btn-primary">
                                            <span class="glyphicon glyphicon-user">
                                                <a th:href="@{courseDetail(id=${course.id})}" style="color:#fff"
                                                >
                                                [[${course.readCount}]]人学习过
                                                </a>
                                            </span>
                                </button>
                            </div>
                        </div>
                    </article>
                    <!-- ... end Post -->
                </div>
            </div>
        </div>
    </div>
</div>
<div class="container" th:if="${courseStages!=null}">
    <div class="row"  th:each="courseStage:${courseStages}">
        <div class="col-sm-12" style="border-left:1px solid rgb(232,232,232)">
            <h2 class="stage-wrap">
                <span class="stage-sort" th:text="${courseStage.sort}"></span>
                <span class="stage-title" th:text="${courseStage.title}"></span>
            </h2>
            <div th:if="${courseStage.id==course.courseStageId}" class="col col-xl-3 col-lg-6 col-md-6 col-sm-12 col-12"
                 th:each="course:${hotCourses}">
                <!--课程列表 从这里设置移入可以点击-->
                <div class="ui-block">
                    <!-- Post -->
                    <article>
                        <div class="post-thumb">
                            <a th:href="@{courseDetail(id=${course.id})}">

                                <img th:if="${course.imgUrl!=null}" style="width: 100%;height: 144px"
                                     th:src="${course.imgUrl}" alt="photo">
                            </a>
                        </div>
                        <div class="post-content">
                            <h4>
                                <a th:href="@{courseDetail(id=${course.id})}">
                                    [(${course.title})]
                                </a>
                            </h4>

                            <p style="color:#999999" th:if="${course.introduce!=null}">
                            <div th:if="${#strings.length(course.introduce) gt 10}">
                                <a th:href="@{courseDetail(id=${course.id})}">
                                    摘要：[(${course.title})]...»
                                </a>

                            </div>
                            <div th:if="${#strings.length(course.introduce) le 10}">
                                <a th:href="@{courseDetail(id=${course.id})}">
                                    摘要：[(${course.introduce})]
                                </a>
                            </div>
                            </p>
                            <div class="new-post-additional-info">
                                <button type="button" class="btn btn-primary">
                                            <span class="glyphicon glyphicon-user">
                                                <a th:href="@{courseDetail(id=${course.id})}" style="color:#fff"
                                                >
                                                [[${course.readCount}]]人学习过
                                                </a>
                                            </span>
                                </button>
                            </div>
                        </div>
                    </article>
                    <!-- ... end Post -->
                </div>
            </div>
        </div>
    </div>
</div>
<br>
<div th:replace="common/bar::#footer"></div>
</body>
<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="common/js/xtiper.min.js"></script>
<script src="common/js/sweetalert.min.js"></script>
<script src="common/js/login.js"></script>
</html>